<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui">
		<title>Heahn</title>
		<!-- 引入fontawesome5css -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<!-- 引入自己的css -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/index.css" />
	</head>

	<body>
		<!-- 页头 -->
		<div id="food-header">
			<div class="f-header-title">
				<a href="javascript:history.back(-1);">
					<i class="fas fa-arrow-left"></i>
				</a>
				<h5>午餐</h5>
				<a href="javascript:;">跳过正餐</a>
			</div>
			<div class="f-header-nav">
				<a class="f-header-nav-active" href="javascript:;">搜索</a>
				<a href="javascript:;">最爱</a>
				<a href="javascript:;">我的食物</a>
			</div>
		</div>

		<!-- 主题 -->
		<div id="food-main"> 
			<div class="search">
				<div>
					<i class="fas fa-search"></i>
					<input type="text" id="food-name" placeholder="搜索食物或餐馆" autocomplete="off" />
				</div>
				<input type="button" id="search-btn" value="搜索" />
			</div>
			<div class="food-list">
				<ul class="food-ul">
					<!--<volist name="data" id="row">
						<li>
							<div class="text">
								<h6>{$row["name"]}</h6>
								<p>{$row["calories"]}大卡&nbsp;&nbsp;{$row["carbohydrates"]}碳水化合物&nbsp;&nbsp;{$row["fat"]}脂肪&nbsp;&nbsp;{$row["protein"]}蛋白质</p>
							</div>
							<div class="icon">
								<a href="javascript:;">
									<i class="fas fa-check"></i>
								</a>
							</div>
						</li>
					</volist>-->
				</ul>
			</div>
		</div>

		<!-- 页脚固定 -->
		<div class="footer-fixed"></div>
		<!-- 页脚 -->
		<div id="footer">
			<div class="footer-active">
				<i class="fas fa-user"></i>
				<p>
					<a href="{:U('Index/index')}">主页</a>
				</p>
			</div>
			<div>
				<i class="fas fa-users"></i>
				<p>
					<a href="javascript:;">圈子</a>
				</p>
			</div>
			<div>
				<i class="fas fa-bars"></i>
				<p>
					<a href="javascript:;">更多</a>
				</p>
			</div>
		</div>
		
		<!-- 引入jQuery3js -->
		<script src="__PUBLIC__/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Vue -->
		<script src="__PUBLIC__/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function selClass(obj, fid) {
				$(obj).find("i").toggleClass("food-list-icon-active");
				$.post("{:U('Index/ajax_addfood')}", {
			        fid: fid,
			   	}, function(data) {
					console.log(data);
			        
			    }, "json");
			}
			
			$(function () {
				$("#food-name").bind('input propertychange', function() {
					var foodName = $("#food-name").val();
					$(".food-ul").empty();
					if (foodName != "") {
						$.post("{:U('Index/ajax_food')}", {
					        foodName: foodName,
					   	}, function(data) {
//					        console.log(data);
					        if (data.length) {
						        for (var i = 0; i < data.length; i++) {
						        	$(".food-ul").append('<li fid="' + data[i]["id"] + '"><div class="text"><h6>' + data[i]["name"] + '</h6><p>' + data[i]["calories"] + '大卡&nbsp;&nbsp;' + data[i]["carbohydrates"] + '碳水化合物&nbsp;&nbsp;' + data[i]["fat"] + '脂肪&nbsp;&nbsp;' + data["protein"] + '蛋白质</p></div><div class="icon"><a href="javascript:;"><i class="fas fa-check"></i></a></div></li>');
						        }
						        
						        $(".food-ul li").click(function () {
				        			selClass($(this), $(this).attr("fid"));
				        			$(".f-header-title a").eq(1).attr("href", "{:U('Index/complete')}").text("完成");
					        	});
					        }
					    }, "json");
					}
				});
			})
			
		</script>
	</body>

</html>